<template>
  <div class="about-us">
    <!-- 导航栏 -->
    <van-nav-bar
      title="关于我们"
      left-text="返回"
      left-arrow
      @click-left="goBack"
      :style="{ backgroundColor: '#1989fa', color: '#fff' }"
    ></van-nav-bar>

    <!-- 页面内容 -->
    <div class="content">
      <h1>欢迎来到我们的页面</h1>
      <p class="description">
        我们是一家致力于为社会提供志愿活动的平台，旨在通过各种志愿者活动，帮助有需要的人并促进社会的和谐发展。无论你是想参与活动还是组织活动，我们都欢迎你的加入！
      </p>
      <p class="more-info">想了解更多信息，请联系我们。</p>
    </div>
  </div>
</template>
  
  <script>
export default {
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1); // 返回上一页
    },
  },
};
</script>
  
  <style scoped>
.van-nav-bar ::v-deep .van-nav-bar__text,
.van-nav-bar ::v-deep .van-nav-bar__title {
  color: white !important;
}

.van-nav-bar ::v-deep .van-nav-bar__arrow {
  color: white !important;
}
/* 页面整体样式 */
.about-us {
  font-family: Arial, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
}

/* 导航栏样式 */
.van-nav-bar {
  height: 7vh;
  line-height: 7vh;
}

/* 内容区样式 */
.content {
  flex: 1;
  padding: 3vh 5vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 主标题样式 */
h1 {
  font-size: 4vh;
  color: #333;
  font-weight: bold;
  margin-bottom: 2vh;
}

/* 描述文字样式 */
.description {
  font-size: 2.5vh;
  color: #666;
  line-height: 1.6;
  margin-bottom: 3vh;
}

/* 更多信息样式 */
.more-info {
  font-size: 2vh;
  color: #1989fa;
  font-weight: bold;
}
</style>
  